<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model</h1>
    <hr>
    <div id="app">
        <h1>文本绑定</h1>
        <hr>
        <p>{{message}}</p>
        <input type="text" v-model="message">
        <h1>文本域绑定</h1>
        <hr>
        <p>{{message1}}</p>
        <textarea cols="30" rows="10" v-model="message1"></textarea>
        <h1>单个复选框，绑定到布尔值：</h1>
        <hr>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
        <h1>多个复选框，绑定到同一个数组：</h1>
        <hr>
        <p>
            <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
            <label for="jack">jack</label>
            <input type="checkbox" id="mack" value="mack" v-model="checkedNames">
            <label for="mack">mack</label>
            <input type="checkbox" id="jam" value="jam" v-model="checkedNames">
            <label for="jam">jam</label>
            <div>{{checkedNames}}</div>
        </p>
        <h1>单选按钮：</h1>
        <hr>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="two">女</label>
        <div>你选择的是：{{sex}}</div>
        <h1>选择框：</h1>
        <p>
            <select v-model="selected" multiple>
                <option value="" disabled>请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option> 
            </select>
            <div>你选择的是：{{selected}}</div>
        </p>
        <hr>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{ 
            message:"李锋",
            message1:"文本域",
            checked:true,
            checkedNames:[],
            sex:"男",
            selected:''
            
        }
    })
</script>
</html>